<template>
    <div class="leftBottomChart">
        <div style="flex:2;display:flex;">
            <h2>身高分布/cm</h2>
            <div class="chart" style="flex:1" ref="leftBottomChart1"></div>
            <div class="chart" style="flex:1" ref="leftBottomChart3"></div>
        </div>
        <div class="chart" style="flex:1" ref="leftBottomChart2"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,watchEffect } from 'vue';
import * as echarts from 'echarts';
import { getLeftBottomChartData } from '@/api/data-screen/LeftChart';

onMounted(() => {
    initLeftBottomChart();
    initChartData();
})

// 获取数据并更新图表
const initChartData = async () => {
  try {
    const result = await getLeftBottomChartData();
    manHeight.value = result.data.manHeight;
    womanHeight.value = result.data.womanHeight;
    weight.value = result.data.weight; // 确保这里的数据完整

    // 数据获取后更新图表
    updateCharts();
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

// 获取根元素字体大小
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

// 定义一个函数，将 rem 转换为像素值
function remToPx(rem) {
    return rem * rootFontSize;
}

// 更新所有图表
const updateCharts = () => {
  updateleftBottomChart1();
  updateleftBottomChart2();
  updateleftBottomChart3();
};

const manHeight = ref(null)
const womanHeight = ref(null)
const weight = ref(null)

//左下图
const leftBottomChart1 = ref<HTMLElement | null>(null);
const leftBottomChart2 = ref<HTMLElement | null>(null);
const leftBottomChart3 = ref<HTMLElement | null>(null);
//初始化
let leftBottomChart1Instance: echarts.ECharts | null = null;
let leftBottomChart2Instance: echarts.ECharts | null = null;
let leftBottomChart3Instance: echarts.ECharts | null = null;
const initLeftBottomChart = () => {
    if (leftBottomChart1.value && leftBottomChart2.value && leftBottomChart3.value) {
        leftBottomChart1Instance = echarts.init(leftBottomChart1.value);
        leftBottomChart2Instance = echarts.init(leftBottomChart2.value);
        leftBottomChart3Instance = echarts.init(leftBottomChart3.value);
        updateleftBottomChart1();
        updateleftBottomChart2();
        updateleftBottomChart3();
    }
};

//更新数据1
const updateleftBottomChart1 = async () => {
    try {
        const option = {
            // 标题配置
            title: [
                // {
                //     text: '身高分布/cm', 
                //     left: 'center', // 标题水平居中
                //     top: '0%', // 标题距离顶部 5%
                //     textStyle: {
                //         color: '#ccc', // 标题文字颜色
                //         fontSize: 16, // 标题文字大小
                //         fontWeight: 'bold' // 标题文字加粗
                //     }
                // },
                {
                    text: '男', // 图表1的副标题
                    left: 'center', // 标题水平居中
                    top: '10%', // 标题距离顶部 10%
                    textStyle: {
                        color: '#fff', // 标题文字颜色
                        fontSize: '0.8rem', // 标题文字大小
                        fontWeight: 'normal' // 标题文字加粗
                    }
                }
            ],
            tooltip: {
                trigger: 'item'
            },
            //图例
            legend: {
                bottom: '13%', // 将图例放置在底部
                left: 'center', // 水平居中
                orient: 'horizontal', // 水平排列
                itemWidth: remToPx(1), // 图例项的宽度
                itemHeight: remToPx(0.6), // 图例项的高度
                itemGap: remToPx(0.6), // 图例项之间的间距 
                textStyle: {
                    color: '#ccc',
                    fontSize: '0.7rem',
                    padding: [0, 0, 0, 0] // 文字左内边距
                }
            },
            series: [
                {
                    name: '身高',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    center: ['50%', '42%'], // 调整饼图中心位置，向上移动
                    avoidLabelOverlap: false,
                    padAngle: 5,//间距
                    itemStyle: {
                        borderRadius: 1
                    },
                    //是否在图上显示标注
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 17,
                            fontWeight: 'bold'
                        }
                    },
                    data: manHeight.value
                }
            ]
        };
        option && leftBottomChart1Instance.setOption(option);
    } catch (error) {
        console.error("获取左下饼图1数据失败:", error);
    }
}

//更新数据2
const updateleftBottomChart2 = async () => {
    try {
        const option = {
            // 标题配置
            title: {
                text: '体重分布/kg', // 标题文本
                left: 'center', // 标题水平居中
                top: '0%', // 标题距离顶部 5%
                textStyle: {
                    color: '#ccc', // 标题文字颜色
                    fontSize: '0.95rem', // 标题文字大小
                    fontWeight: 'bold' // 标题文字加粗
                }
            },
            tooltip: {
                trigger: 'item'
            },
            //图例
            legend: {
                bottom: '13%', // 将图例放置在底部
                left: 'center', // 水平居中
                orient: 'horizontal', // 水平排列
                itemWidth: remToPx(1), // 图例项的宽度
                itemHeight: remToPx(0.6), // 图例项的高度
                itemGap: remToPx(0.6), // 图例项之间的间距 
                textStyle: {
                    color: '#ccc',
                    fontSize: '0.7rem',
                    padding: [0, 0, 0, 0] // 文字左内边距
                }
            },
            grid: {
                top: '0%',
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true
            },
            series: [
                {
                    name: '体重',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    center: ['50%', '42%'], // 调整饼图中心位置，向上移动
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    //图形圆角
                    itemStyle: {
                        borderRadius: 1
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 17,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: weight.value
                }
            ]
        };
        option && leftBottomChart2Instance.setOption(option);
    } catch (error) {
        console.error("获取左下饼图2数据失败:", error);
    }
}

//更新数据3
const updateleftBottomChart3 = async () => {
    try {
        const option = {
            // 标题配置
            title: [
                // {
                //     text: '身高分布/cm', // 共同的标题
                //     left: '0%', // 标题水平居中
                //     top: '0%', // 标题距离顶部 5%
                //     textStyle: {
                //         color: '#ccc', // 标题文字颜色
                //         fontSize: 16, // 标题文字大小
                //         fontWeight: 'bold' // 标题文字加粗
                //     }
                // },
                {
                    text: '女', // 图表3的副标题
                    left: 'center', // 标题水平居中
                    top: '10%', // 标题距离顶部 10%
                    textStyle: {
                        color: '#fff', // 标题文字颜色
                        fontSize: '0.8rem', // 标题文字大小
                        fontWeight: 'normal' // 标题文字加粗
                    }
                }
            ],
            tooltip: {
                trigger: 'item'
            },
            //图例
            legend: {
                bottom: '13%', // 将图例放置在底部
                left: 'center', // 水平居中
                orient: 'horizontal', // 水平排列
                itemWidth: remToPx(1), // 图例项的宽度
                itemHeight: remToPx(0.6), // 图例项的高度
                itemGap: remToPx(0.6), // 图例项之间的间距 
                textStyle: {
                    color: '#ccc',
                    fontSize: '0.7rem',
                    padding: [0, 0, 0, 0] // 文字左内边距
                }
            },
            series: [
                {
                    name: '身高',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    center: ['50%', '42%'], // 调整饼图中心位置，向上移动
                    avoidLabelOverlap: false,
                    padAngle: 5,//间距
                    itemStyle: {
                        borderRadius: 2
                    },
                    //是否在图上显示标注
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 17,
                            fontWeight: 'bold'
                        }
                    },
                    data: womanHeight.value
                }
            ]
        };
        option && leftBottomChart3Instance.setOption(option);
    } catch (error) {
        console.error("获取左下饼图3数据失败:", error);
    }
}
</script>

<style scoped>

h2{
    position: absolute;
    color: #ccc;
    top: 0.8rem;
    left: 8rem;
    font-size: 0.99rem;
}

.leftBottomChart {
    display: flex;
    width: 100%;
    height: 100%;
}

.chart {
    height: 100%;
    width: 100%;
}
</style>